Introduction

Previously, you recapped the procedure for retrieving online data to be used in a React Native app. In this exercise, you will practice retrieving and parsing data from a remote server to be displayed on the Home screen and storing it in a SQLite database. You'll also create a new screen where this data will later be displayed.

Scenario

Little Lemon chefs are so excited about the fact their tasty dishes are soon to be added to the newly created mobile application. To ease the maintenance and management of the menu, the team has decided to host the data in a remote server. That way, the mobile application can pull the latest version, making sure the restaurant hungry clients always have the most up-to-date version. Besides that, one of the requirements is that the application can work offline. To achieve that, the menu data will be stored locally in a SQLite database.

Recall that you previously set up the navigation for moving between screens in the app. Now, you'll need for the app to interact with the API by sending an HTTP request, and then handling the response that comes in the form of JSON data. In such a case, the updated data flow in the app might be as follows:

Instructions

Step 1: Create a new component for the Home screen

You'll need to set up the screen on which Little Lemon's menu data will be displayed, so let's take care of that first. Create a new component called Home.js and place it in the “screens” folder of your project.

In the Root Navigator, add a new screen component to the signed in stack, along with the Profile screen. Name the new screen “Home”. Reference the code snippet below as a guideline. 

return (
 <Stack.Navigator>
   {state.isOnboardingCompleted ? (
     // Onboarding completed, user is signed in
     <Stack.Screen name="Home" component={HomeScreen} />
     <Stack.Screen name="Profile" component={ProfileScreen} />
   ) : (
     // User is NOT signed in
     <Stack.Screen name="Onboarding" component={OnboardingScreen} />
   )}
 </Stack.Navigator>
);

This Home screen will represent the landing screen after completing the onboarding flow, displaying a header, a banner with a search bar and a list of menu items.

For reference, below you’ll find an example visual mockup you can base your implementation on. Once again, feel free to deviate as much as you want, in case you would like to incorporate your own visual tweaks.

In this exercise, you will implement the header and the list of menu items. The banner with the embedded search bar and the menu categories will be tackled in a later exercise.

Step 2: Header component

Implement the header component, composed of the Little Lemon logo and the avatar on the top right corner. Selecting the avatar should take users to the Profile screen.

Step 3: Fetching the menu data

Fetch the menu data from the remote server, which can be found at this URL .

The menu is data is encoded in a JSON file that presents the next structure: 

{
  "menu": [
    {
      "name": "Greek Salad",
      "price": 12.99,
      "description": "Our delicious salad is served with Feta cheese and peeled cucumber. Includes tomatoes, onions, olives, salt and oregano in the ingredients.",
      "image": "greekSalad.jpg",
    },
    {
      "name": "Bruschetta",
      "price": 7.99,
      "description": "Delicious grilled bread rubbed with garlic and topped with olive oil and salt. Our Bruschetta includes tomato and cheese.",
      "image": "bruschetta.jpg"
    },
    {...}  
  ]
}

You can use the fetch API or an external library like Axios to retrieve the data from the server.

To fetch the images, use the following base URL, where imageFileName should be replaced with the name of the file in the JSON, pointed to by the image property:

https://github.com/Meta-Mobile-Developer-PC/Working-With-Data-API/blob/main/images/${imageFileName}?raw=true

For example, to fetch the image for Greek Salad, you would alter the above URL to the following:

https://github.com/Meta-Mobile-Developer-PC/Working-With-Data-API/blob/main/images/greekSalad.jpg?raw=true

Step 4: Create the UI elements

Create the UI elements to render the list of menu items. Use a FlatList component for the list of menu items.

Remember to decode and transform the data to a format that FlatList understands. Check the FlatList documentation for further information.

Step 5: Storing in SQLite

Store the food menu items in a SQLite database. Use the Expo SQLite library. Name the database little_lemon and the table to store the menu items menu.

When the application starts up and the user is signed in, it should respond as follows:

Conclusion

In this exercise, you created a new screen component to display the Little Lemon restaurant menu. To populate the menu items, you first retrieved the data from a remote server and then stored in an SQLite database, so that the application works seamlessly even when there is no internet connectivity.